<script setup lang="ts">
import { FitAddon } from '@xterm/addon-fit';
import { Terminal } from '@xterm/xterm';
import { onMounted, onUnmounted, Ref, ref, watch } from 'vue';

const content = defineModel() as Ref<string>;
const terminal = ref({} as Terminal);
const terminalContainer = ref<HTMLElement | null>(null);
const fitAddon = ref({} as FitAddon);

onMounted(async () => {
    initTerm();
    
    // 监听窗口大小变化，调整终端大小
    window.addEventListener('resize', handleResize);
})

onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
})

const handleResize = () => {
    if (fitAddon.value && fitAddon.value.fit) {
        setTimeout(() => {
            fitAddon.value.fit();
        }, 50);
    }
}

watch(() => content.value, (newVal, oldVal) => {
    if (!terminal.value || !terminal.value.write) return;
    
    // 如果是初始化或内容完全不同，则清空终端重新写入
    if (!oldVal || oldVal.length === 0 || newVal.indexOf(oldVal) !== 0) {
        terminal.value.clear();
        terminal.value.write(newVal);
    } else {
        // 如果是追加内容，只写入新增部分
        const newContent = newVal.substring(oldVal.length);
        if (newContent) {
            terminal.value.write(newContent);
        }
    }
    
    // 调整终端大小
    setTimeout(() => {
        if (fitAddon.value && fitAddon.value.fit) {
            fitAddon.value.fit();
        }
    }, 10);
})

const initTerm = () => {
    // 配置终端选项
    terminal.value = new Terminal({
        theme: {
            foreground: '#D4D4D4',
            background: '#1a1a1a',
            cursor: '#569CD6',
            black: '#000000',
            red: '#F14C4C',
            green: '#23D18B',
            yellow: '#F5F543',
            blue: '#3B8EEA',
            magenta: '#D670D6',
            cyan: '#29B8DB',
            white: '#E5E5E5',
            brightBlack: '#666666',
            brightRed: '#F14C4C',
            brightGreen: '#23D18B',
            brightYellow: '#F5F543',
            brightBlue: '#3B8EEA',
            brightMagenta: '#D670D6',
            brightCyan: '#29B8DB',
            brightWhite: '#E5E5E5',
        },
        fontFamily: 'Consolas, "Courier New", monospace',
        fontSize: 13,
        lineHeight: 1.3,
        cursorBlink: true,
        scrollback: 1000,
        disableStdin: true, // 禁用输入功能
        convertEol: true, // 将 \n 转换为 \r\n
    });
    
    // 加载自适应插件
    fitAddon.value = new FitAddon();
    terminal.value.loadAddon(fitAddon.value);
    
    // 打开终端
    if (terminalContainer.value) {
        terminal.value.open(terminalContainer.value);
        
        // 初始化大小
        setTimeout(() => {
            fitAddon.value.fit();
            
            // 如果有内容，写入终端
            if (content.value) {
                terminal.value.clear();
                terminal.value.write(content.value);
            }
        }, 50);
    }
}
</script>

<template>
    <div class="terminal-wrapper">
        <div ref="terminalContainer" class="terminal-container"></div>
    </div>
</template>

<style lang="scss" scoped>
.terminal-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    
    .terminal-container {
        width: 100%;
        height: 100%;
        padding: 5px;
    }
}
</style>

<style>
/* 定制终端样式 */
.xterm {
    height: 100%;
}

/* 隐藏滚动条但保留滚动功能 */
.xterm-viewport::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

.xterm-viewport::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.xterm-viewport::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
</style>